<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
<TITLE>
 Overview
</TITLE>
<LINK REL ="stylesheet" TYPE="text/css" HREF="stylesheet.css" TITLE="Style">
<SCRIPT>
function asd()
{
parent.document.title=" Overview";
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white" onload="asd();">

<!-- ========== START OF NAVBAR ========== -->
<A NAME="navbar_top"><!-- --></A>
<TABLE BORDER="0" WIDTH="100%" CELLPADDING="1" CELLSPACING="0">
<TR>
<TD COLSPAN=2 BGCOLOR="#EEEEFF" CLASS="NavBarCell1">
<A NAME="navbar_top_firstrow"><!-- --></A>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="3">
  <TR ALIGN="center" VALIGN="top">
  
  
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="overview-summary.html"><FONT CLASS="NavBarFont1"><b>Overview</b></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#FFFFFF" CLASS="NavBarCell1Rev">	&nbsp;<FONT CLASS="NavBarFont1Rev"><b>File</b></FONT>&nbsp;</TD>
  

  <TD BGCOLOR="#FFFFFF" CLASS="NavBarCell1"> 	<FONT CLASS="NavBarFont1">Class</FONT>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="overview-tree.html"><FONT CLASS="NavBarFont1"><b>Tree</b></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="index-all.html"--><FONT CLASS="NavBarFont1"><b>Index</b></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="help-doc.html"><FONT CLASS="NavBarFont1"><b>Help</b></FONT></A>&nbsp;</TD>
  </TR>
</TABLE>
</TD>
<TD BGCOLOR="#EEEEFF" ALIGN="right" VALIGN="top">
<EM>
<b></b></EM>
</TD>
</TR>

<TR>
<TD BGCOLOR="white" CLASS="NavBarCell2"><FONT SIZE="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</FONT></TD>
<TD BGCOLOR="white" CLASS="NavBarCell2"><FONT SIZE="-2">
  <A HREF="index.html" TARGET="_top"><B>FRAMES</B></A>  &nbsp;
&nbsp;<A HREF="overview-summary.html" TARGET="_top"><B>NO FRAMES</B></A>
&nbsp;&nbsp;
<SCRIPT>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</SCRIPT>
<NOSCRIPT>
<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>
</NOSCRIPT>
</FONT></TD>
</TR>
</TABLE>
<!-- =========== END OF NAVBAR =========== -->

<HR>
<CENTER>

   <H2>animationExtensions.js</H2>

</CENTER>
        
            
        
        
        <h4>Summary</h4>
        <p>
        
           No overview generated for 'animationExtensions.js'<BR/><BR/>
           
        </p>

<HR>






<!-- START SOURCECODE -->
<pre class="sourceview">

<span class="comment">/**
 * To scroll the height from a elemnt from one value to an other. 
 * Without parameters the function will first check if the element has a height. 
 * If so, it will scroll the elemnent to 0px height, otherwise from 0px to the scrollHeight.
 * <span class="attrib">@param</span> from optional
 * <span class="attrib">@param</span> to optional
 */</span>
HTMLElement.<span class="reserved">prototype</span>.animateHeight=<span class="reserved">function</span>(from, to)
{
  <span class="reserved">if</span>(!window[<span class="literal">'Animation'</span>]) <span class="reserved">return</span>;
  <span class="reserved">if</span>(!<span class="reserved">this</span>._animation_height)
  {
    <span class="reserved">this</span>._animation_height=<span class="reserved">this</span>.createAnimation();
    <span class="reserved">this</span>.style.height=from||<span class="literal">'0px'</span>;
    <span class="reserved">this</span>._animation_height.accelerationProfile=<span class="reserved">this</span>._animation_height.sine;
  };
  
  <span class="reserved">if</span>(from)
  {
    <span class="reserved">this</span>._animation_height.addAnimation(<span class="literal">'height'</span>, from, (to?to:<span class="reserved">this</span>.scrollHeight+<span class="literal">'px'</span>)).run();
  }
  <span class="reserved">else</span>
  {
    <span class="reserved">if</span>(<span class="reserved">this</span>.style.height==<span class="literal">'0px'</span>)
    {
      <span class="reserved">this</span>._animation_height.addAnimation(<span class="literal">'height'</span>, <span class="literal">'0px'</span>, (to?to:<span class="reserved">this</span>.scrollHeight+<span class="literal">'px'</span>)).run();
    }
    <span class="reserved">else</span>
    {
      <span class="reserved">this</span>._animation_height.addAnimation(<span class="literal">'height'</span>, <span class="reserved">this</span>.style.height, <span class="literal">'0px'</span>).run();
    }
  }
}
<span class="comment">/**
 * To scroll the width from a elemnt from one value to an other. 
 * Without parameters the function will first check if the element has a width. 
 * If so, it will scroll the elemnent to 0px width, otherwise from 0px to the scrollWidth.
 * <span class="attrib">@param</span> from optional
 * <span class="attrib">@param</span> to optional
 */</span>
HTMLElement.<span class="reserved">prototype</span>.animateWidth=<span class="reserved">function</span>(from, to)
{
  <span class="reserved">if</span>(!window[<span class="literal">'Animation'</span>]) <span class="reserved">return</span>;
  <span class="reserved">if</span>(!<span class="reserved">this</span>._animation_width)
  {
    <span class="reserved">this</span>._animation_width=<span class="reserved">this</span>.createAnimation();
    <span class="reserved">this</span>.style.width=from||<span class="literal">'0px'</span>;
    <span class="reserved">this</span>._animation_width.accelerationProfile=<span class="reserved">this</span>._animation_width.sine;
  };
  
  <span class="reserved">if</span>(from)
  {
    <span class="reserved">this</span>._animation_width.addAnimation(<span class="literal">'width'</span>, from, (to?to:<span class="reserved">this</span>.scrollWidth+<span class="literal">'px'</span>)).run();
  }
  <span class="reserved">else</span>
  {
    <span class="reserved">if</span>(<span class="reserved">this</span>.style.width==<span class="literal">'0px'</span>)
    {
      <span class="reserved">this</span>._animation_width.addAnimation(<span class="literal">'width'</span>, <span class="literal">'0px'</span>, (to?to:<span class="reserved">this</span>.scrollWidth+<span class="literal">'px'</span>)).run();
    }
    <span class="reserved">else</span>
    {
      <span class="reserved">this</span>._animation_width.addAnimation(<span class="literal">'width'</span>, <span class="reserved">this</span>.style.width, <span class="literal">'0px'</span>).run();
    }
  }
}
<span class="comment">/**
  * To scroll the height and the width from a elemnt from one value to an other. 
  * Without parameters the function will first check if the element has a height. 
  * If so, it will scroll the elemnent to 0px height, otherwise from 0px to the scrollHeight.
  * The same goes for width.
  * <span class="attrib">@param</span> heigtFrom optional
  * <span class="attrib">@param</span> heigtTo optional
  * <span class="attrib">@param</span> widthFrom optional
  * <span class="attrib">@param</span> widthTo optional
 */</span>
HTMLElement.<span class="reserved">prototype</span>.animateHeightAndWidth=<span class="reserved">function</span>(heightFrom, heightTo, widthFrom, widthTo)
{
  <span class="reserved">if</span>(!window[<span class="literal">'Animation'</span>]) <span class="reserved">return</span>;
  <span class="reserved">if</span>(!<span class="reserved">this</span>._animation_height_width)
  {
    <span class="reserved">this</span>._animation_height_width=<span class="reserved">this</span>.createAnimation();
    <span class="reserved">this</span>.style.height=heightFrom||<span class="literal">'0px'</span>;
    <span class="reserved">this</span>.style.width=widthFrom||<span class="literal">'0px'</span>;
    <span class="reserved">this</span>._animation_height_width.accelerationProfile=<span class="reserved">this</span>._animation_height_width.sine;
  };
  <span class="reserved">if</span>(heightFrom || widthFrom)
  {
    <span class="reserved">this</span>._animation_height_width.
      addAnimation(<span class="literal">'height'</span>, heightFrom?heightFrom:<span class="reserved">this</span>.style.height, (heightTo?heightTo:<span class="reserved">this</span>.scrollHeight+<span class="literal">'px'</span>)).
      addAnimation(<span class="literal">'width'</span>, widthFrom?widthFrom:<span class="reserved">this</span>.style.width, (widthTo?widthTo:<span class="reserved">this</span>.scrollWidth+<span class="literal">'px'</span>)).
      run();
  }
  <span class="reserved">else</span>
  {
    <span class="reserved">if</span>(<span class="reserved">this</span>.style.height==<span class="literal">'0px'</span>)
    {
    <span class="reserved">this</span>._animation_height_width.
      addAnimation(<span class="literal">'height'</span>, <span class="literal">'0px'</span>, (heightTo?heightTo:<span class="reserved">this</span>.scrollHeight+<span class="literal">'px'</span>)).
      addAnimation(<span class="literal">'width'</span>, <span class="literal">'0px'</span>, (widthTo?widthTo:<span class="reserved">this</span>.scrollWidth+<span class="literal">'px'</span>)).
      run();
    }
    <span class="reserved">else</span>
    {
    <span class="reserved">this</span>._animation_height_width.
      addAnimation(<span class="literal">'height'</span>, <span class="reserved">this</span>.style.height, <span class="literal">'0px'</span>).
      addAnimation(<span class="literal">'width'</span>, <span class="reserved">this</span>.style.width, <span class="literal">'0px'</span>).
      run();
    }
  }
}
<span class="comment">/**
 * To fade a element from one value to an other.
 * <span class="attrib">@param</span> from optional
 * <span class="attrib">@param</span> to optional
 */</span>
HTMLElement.<span class="reserved">prototype</span>.fade=<span class="reserved">function</span>(from, to, speed)
{
  <span class="reserved">if</span>(!window[<span class="literal">'Animation'</span>]) <span class="reserved">return</span>;
  <span class="reserved">if</span>(!<span class="reserved">this</span>._animation_fade)
  {
    <span class="reserved">this</span>._animation_fade=<span class="reserved">this</span>.createAnimation();
    <span class="reserved">this</span>._animation_fade.speed=speed||20;
    <span class="reserved">this</span>.style.opacity=from||0;
    <span class="reserved">this</span>._animation_fade.accelerationProfile=<span class="reserved">this</span>._animation_fade.accelerate;
  }
  <span class="reserved">this</span>._animation_fade.addAnimation(<span class="literal">'opacity'</span>, from?from:<span class="reserved">this</span>.style.opacity, to?to:1).run();
}
<span class="comment">/**
 * To fade the background color from a element from one value to an other.
 * <span class="attrib">@param</span> from optional
 * <span class="attrib">@param</span> to optional
 */</span>
HTMLElement.<span class="reserved">prototype</span>.fadeColor=<span class="reserved">function</span>(from, to, speed)
{
  <span class="reserved">if</span>(!window[<span class="literal">'Animation'</span>]) <span class="reserved">return</span>;
  <span class="reserved">if</span>(!<span class="reserved">this</span>._animation_fade_color)
  {
    <span class="reserved">this</span>._animation_fade_color=<span class="reserved">this</span>.createAnimation();
    <span class="reserved">this</span>._animation_fade_color.speed=speed||20;
    <span class="reserved">this</span>.style.backgroundColor=from||<span class="literal">'#00f'</span>;
    <span class="reserved">this</span>._animation_fade_color.accelerationProfile=<span class="reserved">this</span>._animation_fade_color.accelerate;
  }
  <span class="reserved">this</span>._animation_fade_color.addAnimation(<span class="literal">'backgroundColor'</span>, from?from:<span class="reserved">this</span>.style.backgroundColor, to?to:<span class="literal">'#fff'</span>).run();
}
</pre>
<!-- END SOURCECODE -->
<HR>




<!-- ========== START OF NAVBAR ========== -->
<A NAME="navbar_top"><!-- --></A>
<TABLE BORDER="0" WIDTH="100%" CELLPADDING="1" CELLSPACING="0">
<TR>
<TD COLSPAN=2 BGCOLOR="#EEEEFF" CLASS="NavBarCell1">
<A NAME="navbar_top_firstrow"><!-- --></A>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="3">
  <TR ALIGN="center" VALIGN="top">
  
  
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="overview-summary.html"><FONT CLASS="NavBarFont1"><b>Overview</b></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#FFFFFF" CLASS="NavBarCell1Rev">	&nbsp;<FONT CLASS="NavBarFont1Rev"><b>File</b></FONT>&nbsp;</TD>
  

  <TD BGCOLOR="#FFFFFF" CLASS="NavBarCell1"> <FONT CLASS="NavBarFont1">Class</FONT>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="overview-tree.html"><FONT CLASS="NavBarFont1"><b>Tree</b></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="index-all.html"--><FONT CLASS="NavBarFont1"><b>Index</b></FONT></A>&nbsp;</TD>
  <TD BGCOLOR="#EEEEFF" CLASS="NavBarCell1">    <A HREF="help-doc.html"><FONT CLASS="NavBarFont1"><b>Help</b></FONT></A>&nbsp;</TD>
  </TR>
</TABLE>
</TD>
<TD BGCOLOR="#EEEEFF" ALIGN="right" VALIGN="top"><EM>
<b></b></EM>
</TD>
</TR>

<TR>
<TD BGCOLOR="white" CLASS="NavBarCell2"><FONT SIZE="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</FONT></TD>
<TD BGCOLOR="white" CLASS="NavBarCell2"><FONT SIZE="-2">
  <A HREF="index.html" TARGET="_top"><B>FRAMES</B></A>  &nbsp;
&nbsp;<A HREF="overview-summary.html" TARGET="_top"><B>NO FRAMES</B></A>
&nbsp;&nbsp;
<SCRIPT>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</SCRIPT>
<NOSCRIPT>
<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>
</NOSCRIPT>
</FONT></TD>
</TR>
</TABLE>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<FONT SIZE="-1">

</FONT>
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Wed Jan 25 16:35:21 2006</div>
</BODY>
</HTML>
